<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>生成采购验货单 - 仓库管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <style type="text/css">
        .record-box h2 {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 40px;
        }

        .record-input input {
            width: 400px;
            height: 22px;
            line-height: 22px;
            font-size: 16px;
            padding: 14px 9px;
            border: 1px solid #787878;
        }
        .record-box {
            position: relative;
            width: 900px;
            height: 550px;
            padding: 0 5px;
            font-size: 13px;
            color: #787878;
        }

        .record-head {
            margin: -20px 0 80px 0;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
        }

        .record-head span {
            float: left;
        }

        .record-head i {
            float: right;
            font: normal 28px/30px Tahoma;
            cursor: pointer;
        }

        .record-code {
            position: absolute;
            left: 50%;
            top: 10px;
            margin-left: -110px;
            width: 220px;
            font-size: 14px;
            text-align: center;
        }

        .record-code img {
            width: 100%;
            display: block;
        }

        .record-code span {
            line-height: 2;
        }

        .record-box h2 {
            font-weight: normal;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .record-info {
            line-height: 34px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .record-info span {
            float: left;
            width: 33.3%;
            text-align: left;
        }

        .record-info span:nth-child(3n-1) {
            padding-left: 9%;
            width: 35.66%;
        }

        .record-info span:nth-child(3n) {
            width: 20%;
        }

        .record-info span:last-child {
            width: 100%;
        }

        .record-table {
            max-height: 250px;
            overflow-y: auto;
        }

        .record-table table {
            width: 100%;
        }

        .record-table th, .record-table td {
            padding: 10px 0;
            font-size: 13px;
            text-align: center;
            border: 1px solid #787878;
        }

        .record-table th {
            padding: 5px 0;
        }

        .record-button {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 10px;
            text-align: center;
        }

        .record-button a {
            border: 1px solid #787878;
            padding: 10px 15px;
            font-size: 14px;
            color: #787878;
        }
    </style>
    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <h2 class="sp-title"><a class="active">采购验货</a> </h2>
        <form action="/purchase/checkout_form" method="post" id="sp-form">
            <input type="hidden" name="invoiceId" th:value="${invoice.id}" />
            <input type="hidden" name="invoiceNo" th:value="${invoice.billNo}" />
            <input type="hidden" name="number" th:value="${number}"/>
        <div class="sp-tool">
			<span class="fl">
                <b><select name="qcReport" id="qcReport">
                        <option value="" >是否有QC报告</option>
                        <option value="0" >没有QC报告</option>
                        <option value="1" >有QC报告</option>
                    </select>
                </b>
                <b>QC交接人：<input type="text" name="qcInspector" placeholder="QC交接人" class="date ui-input ui-datepicker-input" autocomplete="off"></b>
                <b>验货编号：[[${number}]]

                </b>
            </span>
            <span class="fl">
                <b style="color: red;" th:text="${msg}"></b>
            </span>
            <span class="fr">
                <i class="save" id="save">生成验货单</i>
            </span>
        </div>


        <div class="check-box">
        <div class="record-info">
            <span>单据编号：<i id="r-number" th:text="${invoice.billNo}"></i></span>
            <span>单据日期：<i id="r-track" th:text="${invoice.billDate}"></i></span>
            <span>&nbsp;</span>
            <span>
                订单商品总数：<i id="r-company" th:text="${invoice.totalQuantity}"></i>&nbsp;
                已入库：<i id="r-time" th:text="${invoice.inQuantity}"></i>
            </span>
        </div>
        </div>
        <div class="sp-table">
            <table>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>商品</th>
                    <th>规格</th>
                    <th>SKU</th>
                    <th>采购数量</th>
                    <th>已验货</th>
                    <th>本次验货数量</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item:${invoice.items}">
                    <td th:text="${itemStat.index + 1}"></td>
                    <td th:text="${item.goodsName}"></td>
                    <td >
                        颜色：<span th:text="${item.colorValue}"></span>&nbsp;
                        尺码：<span th:text="${item.sizeValue}"></span>
                    </td>
                    <td th:text="${item.specNumber}"></td>
                    <td th:text="${item.quantity}">500</td>
                    <td th:text="${item.inQuantity}"></td>
                    <td>

                        <input type="hidden" name="invoiceInfoId" th:if="${item.quantity > item.inQuantity}" th:value="${item.id}">
                        <input type="hidden" name="specNumber" th:if="${item.quantity > item.inQuantity}" th:value="${item.specNumber}">
                        <input type="number" placeholder="输入数量" th:attr="totalQuantity=${item.quantity},inQuantity=${item.inQuantity}" name="inQuantity" th:if="${item.quantity > item.inQuantity}"  />
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        </form>
    </div>


    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
<script>
    $(function () {
        // 保存
        $('#save').click(function () {
            // 获取页面已有的一个form表单
            // var form = document.getElementById("sp-form");
            // 用表单来初始化
            var formData = $('#sp-form').serialize();
            // console.log(formData);
            var qcReport = $("#qcReport").val();
            if (qcReport == '') {
                alert("请确认是否有QC报告");
                return false;
            }

            //检查商品入库数量
            var returnResult = true;
            var totalInQuantity = 0;
            //商品入库数量颜色
            $("input[name^='inQuantity']").each(function (i, el) {
                if ($(this).val() == "") {
                    alert("请填写本次入库数量");
                    returnResult = false;
                    return false;
                }else{
                    var totalQuantity1 = $(this).attr("totalQuantity");//总数量
                    var inQuantity = $(this).attr("inQuantity");//已入库数量
                    var currInQuantity = $(this).val();//当前输入的入库数量
                    var hasQuantity = totalQuantity1 - inQuantity;

                    // if( currInQuantity > hasQuantity){
                    //     alert("入库数量大于可入库数量");
                    //     returnResult = false;
                    //     return false;
                    // }else
                    totalInQuantity += currInQuantity;
                }
            });
            if (returnResult == false) return false;
            if (totalInQuantity == 0) {
                alert("入库商品数量为"+totalInQuantity);
                return false;
            }
            $('#sp-form').submit();
        });
    })
</script>
    <style type="text/css">
        .check-box {
            position: relative;
            width: 900px;
            padding: 0 5px;
            font-size: 13px;
            color: #787878;
        }

        .check-info {
            line-height: 40px;
            overflow: hidden;
        }

        .check-info span {
            float: left;
            width: 18%;
            text-align: center;
        }

        .check-info span:nth-child(1) {
            width: 30%;
            text-align: left;
        }

        .check-info span:nth-child(5) {
            width: 16%;
            text-align: right;
        }

        .check-table {
            margin: 10px 0;
            max-height: 250px;
            overflow-y: auto;
        }

        .check-table table {
            width: 100%;
        }

        .check-table th, .check-table td {
            padding: 10px 0;
            font-size: 13px;
            text-align: center;
            border: 1px solid #787878;
        }

        .check-table th {
            padding: 5px 0;
        }
    </style>

    <script type="text/javascript">
        layui.use(['laydate', 'layer'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;

        });
    </script>
    <!-- end sp-wrapper -->
    <!-- 不同部分 end -->
</div>
</div>
</body>
</html>









